import React, { useState } from "react";
import { styled } from "@mui/material/styles";
import {
  Autocomplete,
  Chip,
  Divider,
  Grid,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Paper,
  TextField,
  Typography,
} from "@mui/material";
import Avatar from "@mui/material/Avatar";
import "./UserPage.css";
import ImportContactsIcon from "@mui/icons-material/ImportContacts";
import MarkdownEditor from "@uiw/react-markdown-editor";
import ReactMarkdown from "react-markdown";
import SchoolIcon from "@mui/icons-material/School";
import IMG from "../../../img/tmp/cover.jpg";
import { useEffect } from "react";
import { useContext } from "react";
import { TitleContext } from "../../../router";
import { UserProContext } from "../../../App";
import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined";
import { Box } from "@mui/system";
import { useQuery } from "@tanstack/react-query";
import { COMMENT_URL, GETTAGS_URL } from "../../../constants/url";
import { getQueryFn } from "../../../query/getQueryFn";
import Passage from "./Passage";
import Loading from "../../../components/loading";
const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: "center",
  color: theme.palette.text.secondary,
}));

const title2 = {
  name: "title2",
  keyCommand: "title2",
  button: { "aria-label": "Add title text" },
  icon: (
    <svg width="12" height="12" viewBox="0 0 512 512">
      <path
        fill="currentColor"
        d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z"
      />
    </svg>
  ),
  execute: ({ state, view }) => {
    if (!state || !view) return;

    const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
    let mark = "#";

    const matchMark = lineInfo.text.match(/^#+/);

    if (matchMark && matchMark[0]) {
      const txt = matchMark[0];
      if (txt.length < 6) {
        mark = txt + "#";
      }
    }

    if (mark.length > 6) {
      mark = "#";
    }
    const title = lineInfo.text.replace(/^#+/, "");
    view.dispatch({
      changes: {
        from: lineInfo.from,
        to: lineInfo.to,
        insert: `${mark}${title}`,
      },
      // selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
      selection: { anchor: lineInfo.from + mark.length },
    });
  },
};

export default function UserPage() {
  const [markdown, setMarkdown] = useState();
  const userproContext = useContext(UserProContext);
  const [name, setName] = useState();
  const titleContext = useContext(TitleContext);
  useEffect(() => {
    titleContext.setnowTitle(0);
  }, []);

  useEffect(() => {
    setName(userproContext.userPro?.name);
  }, [userproContext.userPro?.name]);

  return (
    <div>
      <Grid container spacing={2}>
        <Grid item xs={12} md={4} sm={12}>
          <LeftBar />
        </Grid>

        <Grid item xs={12} sm={12} md={8}>
          {<Passage editor={true} params={{ name: name }} />}
        </Grid>
      </Grid>
    </div>
  );
}

const LeftBar = () => {
  const userproContext = useContext(UserProContext);
  const {
    data: tags,
    isFetching: tagFetching,
    isSuccess: tagSuccess,
  } = useQuery([GETTAGS_URL, { useToken: true }], getQueryFn);

  const {
    data: comment,
    isFetching: commentFetching,
    isSuccess: commentSuccess,
  } = useQuery([COMMENT_URL, { useToken: true }], getQueryFn);

  return (
    <div>
      {(tagFetching || commentFetching) && <Loading />}
      {tagSuccess && !tagFetching && commentSuccess && !commentFetching && (
        <Paper sx={{ width: "100%" }}>
          <Box className="leftProfile">
            <Avatar
              src={userproContext.userPro?.avatar}
              sx={{ width: 150, height: 150, marginBottom: "20px" }}
            ></Avatar>

            <Typography variant="h5">{userproContext.userPro?.name}</Typography>
          </Box>
          <Box
            sx={{
              marginTop: "30px",
              paddingLeft: "20px",
              paddingRight: "20px",
            }}
          >
            <Box
              sx={{
                flexDirection: "row",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <ListItemIcon>
                <ImportContactsIcon color="primary" sx={{ minWidth: "55px" }} />
              </ListItemIcon>
              <ListItemText>
                <Typography>{userproContext.userPro?.major}</Typography>
              </ListItemText>
            </Box>

            <Box
              sx={{
                flexDirection: "row",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <ListItemIcon>
                <SchoolIcon color="primary" sx={{ minWidth: "55px" }} />
              </ListItemIcon>
              <ListItemText>
                <Typography>
                  {userproContext.userPro?.grade}级-
                  {userproContext.userPro?.className}
                </Typography>
              </ListItemText>
            </Box>
            <Divider sx={{ margin: "15px 0" }} />
            <Box>
              <Typography variant="h6" sx={{ marginBottom: "10px" }}>
                标签
              </Typography>

              {tagSuccess &&
                tags?.data?.data?.map((value, key) => {
                  return (
                    <Chip
                      size="small"
                      label={value.tag}
                      color="primary"
                      sx={{ margin: "0 3px " }}
                    />
                  );
                })}
            </Box>
            <Divider sx={{ margin: "15px 0" }} />
            <Box sx={{ paddingBottom: "10px" }}>
              <Typography variant="h6" sx={{ marginBottom: "10px" }}>
                评论
              </Typography>
              {commentSuccess &&
                comment?.data?.data?.map((value, key) => {
                  return (
                    <Paper
                      elevation="8"
                      sx={{ padding: "5px 10px", marginBottom: "20px" }}
                    >
                      <Box sx={{ display: "flex", flexDirection: "row" }}>
                        <Avatar alt={value.name} src={value.avatar}></Avatar>
                        <Box
                          sx={{
                            marginLeft: "10px",
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                          }}
                        >
                          <Typography sx={{ fontWeight: "550" }}>
                            {value.name}
                          </Typography>
                        </Box>
                      </Box>
                      <Box sx={{ padding: "10px" }}>
                        <Typography>{value.content}</Typography>
                      </Box>
                      <Divider />
                      <Box
                        sx={{
                          display: "flex",
                          flexDirection: "row",
                          alignItems: "center",
                        }}
                      >
                        <AccessTimeOutlinedIcon color="primary" />
                        <Typography
                          variant="body1"
                          sx={{
                            color: "#827e7e",
                            margin: "5px 0 5px 3px",
                          }}
                        >
                          {value.date}
                        </Typography>
                        <Box sx={{ flexGrow: 1 }}></Box>
                      </Box>
                    </Paper>
                  );
                })}
            </Box>
          </Box>
        </Paper>
      )}
    </div>
  );
};
